<script setup lang='ts'>
import { categorylistFn, categorybrandlistFn, categorybrandprolistFn } from '../../api/kind'
import {onMounted,ref, reactive} from 'vue'
import type {Ref} from 'vue'

// 当前选中的分类
const active: Ref<number> = ref(0);

// 当前选中的品牌
const active2: Ref<number> = ref(0);
// 分类列表
const categoryList: Ref<string[]> = ref([])
// 品牌列表
const brandList: Ref<any[]> = ref([])

// 商品列表
const proList: Ref<any[]> = ref([])

// 获取某分类下某品牌下的商品
function getProListFn(data: {
  category: string,
  brand: string
}){
  
  categorybrandprolistFn(data).then(res => {
    // console.log(res.data.data);
    proList.value = res.data.data
  })
}

onMounted(()=>{
  
  // 获取所有分类
  categorylistFn().then(res => {
    // console.log(res.data);
    categoryList.value = res.data.data
    
    // 获取第一个分类下的所有品牌
    categorybrandlistFn({
      category: res.data.data[0]
    }).then(res2 => {
      // console.log(res.data.data);
      brandList.value = res2.data.data
      
      // 获取品牌下的商品
      getProListFn({
        category: res.data.data[0],
        brand: res2.data.data[0].brand
      })

    })

  })
})

// ------------- 左边导航的切换事件
function onChange(index: number){
  // 根据选择的内容请求品牌
  // console.log(categoryList.value[index]);
  
  active2.value = 0


  // 获取第一个分类下的所有品牌
    categorybrandlistFn({
      category: categoryList.value[index]
    }).then(res2 => {
      // console.log(res.data.data);
      brandList.value = res2.data.data
      
      // 获取品牌下的商品
      getProListFn({
        category: categoryList.value[index],
        brand: res2.data.data[0].brand
      })

    })


}

// ---------------- 点击品牌的回调函数
function clickTab(data: {title: string}){
  // console.log(data.title, categoryList.value[active.value]);
  getProListFn({
      category: categoryList.value[active.value],
      brand: data.title
  })
}
</script>
<template>
    <main class='box'>
      <header class='header'>
        头部-分类
      </header>

      <div class='content'>
        
        <div class="left">
          <van-sidebar @change="onChange" v-model="active">
            <van-sidebar-item v-for="item in categoryList" :title="item" :key="item" />
          </van-sidebar>
        </div>

        <div class="right">
          <van-tabs title-active-color='#f66' line-width='0' @click-tab='clickTab'	 v-model:active="active2">
            <van-tab v-for="item in brandList" :key="item.brand" :title="item.brand"></van-tab>
          </van-tabs>


          <van-grid icon-size='46' :column-num="3">
            <van-grid-item 
            @click="$router.push({path: '/detail', query:{proid: item.proid}})"
            v-for="item in proList" 
            :key="item.proid" 
            :icon="item.img1" 
            :text="item.brand" />
          </van-grid>

        </div>

      </div>
    </main>
</template>
<style scoped lang="scss">
    .content {
      display: flex;

      .left{
        width: 25%;
        height: 100%;
        overflow: auto;
      }

      .right{
        flex: 1;
      }
    }
</style>